<template>
  <div class="shopcart_content">
    <!-- 头部 -->
    <LoginHeader>
      <span
        style="
          float: left;
          font-size: 16px;
          margin-left: 120px;
          font-weight: 700;
        "
        >网易严选</span
      >
    </LoginHeader>
    <!-- 地址 -->
    <div class="address_wrap">
      <div class="tie"></div>
      <div class="address_info">
        <van-dropdown-menu title="请选择地址">
          <van-dropdown-item
            v-model="value"
            :options="addressList"
            @change="changeAddress"
          />
        </van-dropdown-menu>
      </div>
    </div>
    <!-- 余额 -->
    <div class="balance">
      <van-cell title="余额:¥0.00" icon="warning-o">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="balance-o" icon="balance-o" />
        </template>
      </van-cell>
    </div>
    <!-- 商品合计 -->
    <div class="others">
      <van-cell title="商品总件数" :value="goodsNum" style="height: 52px" />
      <van-cell title="邮费" value="¥8.00" style="height: 52px" />
      <van-cell title="活动优惠" value="-¥0.00" style="height: 52px" />
      <van-cell title="优惠券" value="-¥0.00" style="height: 52px" />
      <van-cell title="我要开发票" is-link style="height: 52px" />
    </div>
    <!-- 包裹 -->
    <div class="goods" v-for="item in goodsList" :key="item.skuId">
      <van-cell class="package" title="包裹" style="height: 47px">
        <div class="package_text">支付后,预计48小时发货</div>
      </van-cell>

      <div class="list_wrap">
        <div class="item_content">
          <div class="content_left">
            <img :src="item.imgUrl" />
          </div>
          <div class="content_right">
            <div class="right_title">
              <div class="red">特价</div>
              <div class="name">{{ item.skuName }}</div>
            </div>
            <div class="tag">
              <van-tag font-size="16px">数量:{{ item.skuNum }}</van-tag>
            </div>
            <div class="price_wrap">
              <div class="price">￥{{ item.orderPrice}}</div>
              <div class="discounts">￥1888</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="h_80"></div> -->
    <!-- 订单备注 -->
    <div class="notes">
      <van-cell-group>
        <van-field
          v-model="message"
          rows="2"
          autosize
          label="订单备注:"
          type="textarea"
          placeholder="请输入备注"
          show-word-limit
        />
      </van-cell-group>
    </div>
    <!-- <div class="h_80"></div> -->
    <!-- 勾选同意 -->
    <div class="confirm">
      <div class="controls">
        <!-- <van-checkbox
          v-model="isAgree"
          name="1"
          shape="square"
          icon-size="12px"
          checked-color="#ee0a24"
          ><div class="confirm_code">
            我已同意<a href="https://m.you.163.com/help/new#/37/73"
              >《网易严选服务协议》</a
            >
          </div></van-checkbox
        > -->
      </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
      <div class="sum_price">
        应付: <span class="red">￥{{ totalPrice }}</span>
      </div>
      <button
        class="order_btn"
        @click="submitOrderHandle"
        :disabled="disOrderBtn"
      >
        提交订单
      </button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref, computed} from "vue";
import type {AddressList} from "../../types/cart";
import LoginHeader from "../../components/LoginHeader/index.vue";
import {reqGetTradeInfo, reqSubmitOrder} from "../../api/shopcart.ts";
import {IGoodsItem} from "../../types/cart";
import { showSuccessToast, showFailToast } from 'vant';
import { useRouter } from "vue-router";
// mock地址
const addressList = ref<AddressList[]>([
  {
    id: 1001,
    value: 1001,
    name: "张三",
    address: "北京北京市昌平区 ",
    phone: "18831712312",
    text: "张三 北京北京市昌平区 18831712312",
    default: 1,
  },
  {
    id: 1002,
    value: 1002,
    name: "Jesse",
    address: "北京车城西四路恒大绿洲",
    text: "Jesse 北京车城西四路恒大绿洲 18790986752",
    phone: "18790986752",
    default: 0,
  },
  {
    id: 1003,
    value: 1003,
    name: "Rose",
    address: "北京昌平区白各庄65号",
    phone: "18899999999",
    text: "Rose 北京昌平区白各庄65号 18899999999",
    default: 0,
  },
]);
// const chooseAddressId = ref(1767)
const goodsList = ref<IGoodsItem[]>([]);
const totalAmount = ref(0);
const tradeNo = ref("");
const addressIndex = ref(0);
const disOrderBtn = ref(false);
const message = ref("");
const isAgree = ref(false);
const value = ref(1001);

const router = useRouter()

// const message =ref('')
// 改变地址
const changeAddress = (value: number) => {
  addressList.value.map((item) => {
    item.default = 0;
    // 将addressList中与传入的value相等的项的default属性设置为1，同时将其他项的default属性设置为0
    item.value === value && (item.default = 1);
    return item;
  });
};
// 获取订单信息
const getTradeInfo = async () => {
  const result = await reqGetTradeInfo();
  // console.log(result);
  goodsList.value = result.data.detailArrayList;
  totalAmount.value = result.data.totalAmount * 99;
  tradeNo.value = result.data.tradeNo;
};
// 获取商品总数量
const goodsNum = computed(() => {
  return goodsList.value.reduce((prev, item) => {
    return (prev += item.skuNum);
  }, 0);
});
// 总价格
const totalPrice = computed(()=>{
  return goodsList.value.reduce((prev, item) => {
      return prev += item.orderPrice * item.skuNum;

  }, 0);
})
// 提交订单
const submitOrderHandle = async () => {
  
  // if (!isAgree.value) {
  //   showFailToast('需要同意《网易严选服务协议》');
  //   return
  // }


  const {name, phone, address} = addressList.value[addressIndex.value];
  const query = {
    consignee: name,
    consigneeTel: phone,
    deliveryAddress: address,
    paymentWay: "ONLINE",
    orderComment: message.value,
    orderDetailList: goodsList.value,
  };
  const result = await reqSubmitOrder(tradeNo.value, query);
  // console.log(result);
  if(result.code == 200){
    router.push({
      path: "/pay_success",
      query: {
        orderId: result.data,
      },
    })
  }
 
};
// 挂载
onMounted(() => {
  getTradeInfo();
});
</script>

<script lang="ts">
export default {
  name: "pay",
};
</script>

<style lang="scss" scoped>
.shopcart_content {
  margin-bottom: 90px;
  // background-color: #f4f4f4;
}
.address_wrap {
  width: 100%;
  margin-bottom: 10px;
  background-color: white;

  .tie {
    display: block;
    height: 5px;
    background-size: 20px 5px;
    background-image: url("//yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/address-bg-67880192dc.png");
  }
}
.balance {
  height: 52px;
  line-height: 52px;
  width: 100%;
  margin-bottom: 10px;
  color: #ccc;
  background-color: white;
}
.others {
  height: 260px;
  width: 100%;
  margin-bottom: 10px;
  background-color: white;
}
.goods {
  height: 170px;
  width: 100%;
  background-color: white;
  // border-bottom: 1px solid #d7cfcf;
  margin-bottom: 7px;
  .package {
    border-bottom: 1px solid #f4f4f4;
    .package_text {
      font-size: 12px;
    }
  }
  .list_wrap {
    width: 100%;
    height: auto;
    padding: 0 10px;
    background-color: #f4f4f4;
    box-sizing: border-box;
    .item_content {
      display: flex;
      background-color: #fff;
      margin-bottom: 10px;
      .content_left {
        img {
          max-width: 130px;
          height: 90px;
        }
      }
      .content_right {
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        width: 200px;
        margin-left: 10px;
        margin-bottom: 8px;
        .right_title {
          display: flex;
          font-size: 14px;
          height: 21px;
          .red {
            color: red;
            width: 100px;
            font-size: 14px;
          }
          .name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .price_wrap {
          display: flex;
          // margin-top: 10px;
          height: 20px;
          line-height: 20px;
          .price {
            font-size: 18px;
            font-weight: bold;
            margin-right: 10px;
          }
          .discounts {
            color: #ccc;
            font-weight: bold;
            font-size: 14px;
            text-decoration: line-through;
          }
        }
      }
    }
  }
}
.notes {
  width: 100%;
  margin-top: 20px;
}
.confirm {
  width: 100%;
  height: 20px;
  background-color: #f4f4f4;
  position: fixed;
  bottom: 50px;
  line-height: 20px;
  .controls {
    margin-left: 10px;
    .confirm_code {
      display: flex;
      font-size: 12px;
      a {
        color: #333;
      }
    }
  }
}
.footer {
  display: flex;
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  align-items: center;
  justify-content: space-between;
  .sum_price {
    padding-left: 6px;
    font-size: 16px;
    // font-weight: bold;
    color: #dd1a21;
  }
  .order_btn {
    display: block;
    width: 113px;
    background-color: #dd1a21;
    height: 100%;
    color: #fff;
    border: 1px solid #fff;
    font-size: 14px;
  }
}
</style>
